<template>
	<view class="code">
		<!-- 返回 -->
		<u-navbar :autoBack="true"></u-navbar>
		<view class="code-content">
			<view class="code-tip">输入6位验证码</view>
			<view class="code-result">
				<view>验证码已发送至 {{ phoneFormat }}</view>
				<view v-if="isShow">{{ countdown }}s后重发</view>
				<view v-else>收不到验证码？
				<text 
				style="text-decoration: underline;" 
				@click="getCode"
				>点击重发</text></view>
			</view>
		</view>
		<view class="code-input">
			<u-code-input v-model="code" :maxlength="6"></u-code-input>
		</view>
	</view>
</template>

<script>
	// 引入发送验证码接口函数
	import { getLoginCode,checkLoginCode } from '../../api/login'
	// 对手机号码进行aes.js加密
	import { Encrypt } from '../../utils/aes.js'
	
	export default {
		data() {
			return {
				phone:'',
				// 验证码倒计时
				countdown:10,
				isShow:true,
				code:''
			}
		},
		methods:{
			getCode() {
				this.isShow = true
				let timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						this.countdown = 10
						this.isShow = false
						clearInterval(timer)
					}
				},1000)
			}
		},
		onLoad(e) {
			this.phone = e.tel
			this.getCode()
			// 发送验证码
			// getLoginCode({
			// 	mobile:this.phone
			// })
		},
		computed:{
			phoneFormat() {
				let arr = this.phone.split('')
				arr.splice(3,4,'****')
				arr.splice(3,0,' ')
				arr.splice(5,0,' ')
				return arr.join('')
			}
		},
		watch:{
			code(newVal,oldVal) {
				// 当满足条件时候，请求接口进行验证
				// if (newVal.length == 6) {
				// 	// 校验验证码
				// 	checkLoginCode({
				// 		mobile:Encrypt(this.phone),
				// 		captcha:newVal
				// 	}).then(res => {
				// 		if (res.data.code == '10006') {
				// 		if (res.accessToken) {
						// 回到我的页面
					// 	uni.switchTab({
					// 		url:'/pages/tabs/my'
					// 	})
					// }
				// 		}
				// 	})
				// }
			}
		}
	}
</script>

<style>
	.code {
		width: 100vw;
		height: 100vh;
		background-color: rgba(255,255,255,0.39);
	}
	.nav-bar {
		padding-top: 50rpx;
	}
	.code-content {
		padding: 223rpx 62rpx 83rpx 62rpx;
		display: flex;
		flex-direction: column;
	}
	.code-tip {
		font-size: 56rpx;
		font-weight: bold;
		color: #342334;
	}
	.code-result {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		color: #343234;
		opacity: 0.53;
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 33rpx;
	}
	.code-input {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>